import React, { useState } from 'react';
import './App.css';
import LinkAnimation from './LinkAnimation/index'
import Navs from './Nav/index'
import Tab from './Tab/index'
import LiveButton from './LiveButton/index'
import LinkIput from './LinkIput/index'
import LinkBacktop from './LinkBacktop/index'

/**
 * Navs组件需要配合Tab组件一起使用Navs,然后需要给Navs传参数navList遵循格式{title:string,id:number}以及Tab name传的是navList中的对应id
 * onAction Navs 中的点击中的方法 参数拿到的是对应的tab的id
 */
const App: React.FC<any> = () => {
  const state = {
    navList: [
      { title: 'teb切换', id: 0 },
      { title: 'button按钮', id: 1 },
      { title: '返回顶部', id: 2 },
      { title: 'input', id: 3 }
    ]
  }
  const [btn, setBtn] = useState(true)
  const onAction = (e: any) => {

  }
  const a = (e: any) => {
    setBtn(btn => {
      return !btn
    })

  }
  const OnInput = (e: string) => {
    console.log(e);
    

  }
  const { navList } = state
  return (
    <div className='app' >


      <Navs count='1' animation={true} fixed={false} navList={navList} onAction={onAction} color='#fff' backgroundColor='pink' fontSize='16px' action={false}>

        <Tab name={0} >
          <LinkIput type='' value='6666' onChange={OnInput}></LinkIput>
          <LiveButton onClick={a}>点我</LiveButton>
          <LinkAnimation name='a' LinkIf={btn} type='right' number={500}>
            <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>555</div>
            <div style={{ height: '50px', width: '100px', backgroundColor: 'blue' }}>555</div>
            <div style={{ height: '50px', width: '50px', backgroundColor: '#000' }}>555</div>
            <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>asd</div>
          </LinkAnimation>
          <LinkAnimation name='b' LinkIf={btn} type='top' >
            <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>555</div>
            <div style={{ height: '50px', width: '100px', backgroundColor: 'blue' }}>555</div>
            <div style={{ height: '50px', width: '50px', backgroundColor: '#000' }}>555</div>
            <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>asd</div>
          </LinkAnimation>
        </Tab>




        <Tab name={1}>
          我的
          <div className='' style={{ height: '2000px', backgroundColor: 'red' }}></div>
        </Tab>

      </Navs>
      <LinkBacktop scrollY={300}>返回顶部</LinkBacktop>
    </div>
  )
}



// class App extends React.Component<any>{
//   state: Readonly<{
//     navList: Nav<string, number>[],
//     btn: boolean
//   }>;
//   constructor(props: any) {
//     super(props)
//     this.state = {
//       btn: true,
//       navList: [
//         { title: 'teb切换', id: 0 },
//         { title: 'button按钮', id: 1 },
//         { title: '返回顶部', id: 2 },
//         { title: 'input', id: 3 }
//       ]
//     }
//   }

//   render() {
//     const { navList, btn } = this.state
//     return (
//       <div className='app' >
//        {/* <div style={{height:'250px'}}>


//        </div> */}
//         <Navs count='1' animation={false} fixed={false} navList={navList} onAction={this.onAction} color='#fff' backgroundColor='pink' fontSize='16px' action={false}>

//           <Tab name={0} >
//           <LinkBacktop scrollY={300}>返回顶部</LinkBacktop>
//             <LinkIput label='aa' value='555' type={''} onChange={this.OnInput}></LinkIput>
//             {/* <LiveButton onClick={this.a}>点我</LiveButton> */}
//             <LiveButton onClick={this.a}>点我</LiveButton>

//             <LinkAnimation LinkIf={btn} type='top'>
//               <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>555</div>
//               <div style={{ height: '50px', width: '100px', backgroundColor: 'blue' }}>555</div>
//               <div style={{ height: '50px', width: '50px', backgroundColor: '#000' }}>555</div>
//               <div style={{ height: '50px', width: '50px', backgroundColor: 'pink' }}>asd</div>
//             </LinkAnimation>
//           </Tab>
//           <Tab name={1}>
//           <LinkBacktop scrollY={300}>返回顶部</LinkBacktop>
//             我的
//             <div className='' style={{ height: '2000px', backgroundColor: 'red' }}></div>
//           </Tab>
//           <Tab name={2}>
//             <div >客服</div>
//           </Tab>
//           <Tab name={3}>
//             <div >哈哈</div>
//           </Tab>
//         </Navs>
//       </div>
//     )
//   }
//   onAction(e: any) {
//     console.log(e);

//   }
//   a = (e: any) => {
//     const { btn } = this.state

//     this.setState({
//       btn: !btn
//     })
//   }
//   OnInput(e: string) {
//     console.log(e);


//   }
// }
export default App;
